<template>
  <div class="bg-white">
    <SearchForm @get="handleSearch"></SearchForm>
    <br />
    <Table
      :bordered="true"
      :dataSource="dataSource"
      :columns="entAppColumns"
      :pagination="false"
      :loading="loading"
      :scroll="scroll"
      class="main-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span
            v-per="'renew'"
            v-if="
              (record.status == 'normal' || record.status == 'freeze') &&
              record.appType == 3 &&
              record.paymentType !== 'postPaid'
            "
          >
            <a @click="renew(record)">续订</a>
            <Divider type="vertical" />
          </span>
          <span v-per="'audit'" v-if="record.status == 'underReview' || record.status == 'rejected'">
            <a @click="audit(record)">审核</a>
            <Divider type="vertical" />
          </span>

          <Popconfirm ok-text="确定" cancel-text="取消" @confirm="freeze(record)">
            <template #title>
              <p>确认停用此租户应用?</p>
              <p>租户：{{ record.alias }}</p>
              <p>应用：{{ record.appName }}</p>
            </template>
            <span v-per="'freeze'">
              <a v-if="record.status == 'normal' && record.appType !== 1">停用</a>
            </span>
          </Popconfirm>

          <Popconfirm ok-text="确定" cancel-text="取消" @confirm="unfreeze(record)">
            <template #title>
              <p>确认启用此租户应用?</p>
              <p>租户：{{ record.alias }}</p>
              <p>应用：{{ record.appName }}</p>
            </template>
            <span v-per="'unfreeze'">
              <a v-if="record.status == 'freeze' && record.appType !== 1">启用</a>
            </span>
          </Popconfirm>
        </template>
      </template>
    </Table>
    <br />
    <Pagination
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
    />
    <AuditModal ref="auditModal" @submitSuccess="getDataSource"></AuditModal>
    <RenewModal ref="renewModal" @submitSuccess="getDataSource" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';

import { Table, Pagination, Divider, Popconfirm, message } from 'ant-design-vue';
import SearchForm from '/@/views/tenant-center/enterpriseAppManagement/component/SearchForm.vue';
import { entAppColumns } from './data';
import {
  freezeApp,
  getEnterpriseMgtTable,
  unfreezeApp,
} from '/@/api/tenant-mgmt/enterpriseAppManagement/enterpriseAppManagement';
import AuditModal from '/@/views/tenant-center/enterpriseManagement/component/AuditModal.vue';
import RenewModal from '/@/views/tenant-center/enterpriseAppManagement/component/RenewModal.vue';
const loading = ref(true);
const scroll = ref<undefined | object>(undefined);
let dataSource = ref();
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let params = {
  current: current.value,
  size: pageSize.value,
  sourceList: [],
  statusList: [],
  tenantIdList: [],
  appIdList: [],
};

const getDataSource = async () => {
  try {
    let data = await getEnterpriseMgtTable(params);
    dataSource.value = data.items;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  if (val <= 10) {
    scroll.value = undefined;
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});

const handleSearch = (searchParam) => {
  params = {
    current: current.value,
    size: pageSize.value,
    sourceList: searchParam.sourceList,
    statusList: searchParam.statusList,
    tenantIdList: searchParam.tenantIdList,
    appIdList: searchParam.appIdList,
  };
  getDataSource();
};

const auditModal = ref();
const audit = async (record) => {
  auditModal.value.openAudit(record, '审核订阅应用');
  getDataSource();
};
const freeze = async (record) => {
  let res = await freezeApp({ appId: record.appId, tenantCode: record.tenantCode, id: record.id });
  if (res) {
    message.success('停用成功');
    getDataSource();
  }
};

const unfreeze = async (record) => {
  let res = await unfreezeApp({ appId: record.appId, tenantCode: record.tenantCode, id: record.id });
  if (res) {
    message.success('启用成功');
  }
  getDataSource();
};

const renewModal = ref();
const renew = (record) => {
  renewModal.value.openRenew(record);
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
